<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <p slot="title">查看SPU信息</p>
      <Tabs v-model="tabValue" @on-click="handleTabChange">
        <TabPane label="商品基本信息" name="baseInfo"> </TabPane>
        <TabPane label="销售价格信息" name="saleInfo"> </TabPane>
        <TabPane label="图文介绍" name="picInfo"> </TabPane>
      </Tabs>
      <baseInfo ref="baseInfo" v-show="tabValue == 'baseInfo'" />
      <saleInfo ref="saleInfo" v-show="tabValue == 'saleInfo'" />
      <picInfo ref="picInfo" v-show="tabValue == 'picInfo'" />
      <el-backtop target="#app .i-layout-content-main">
        <i class="el-icon-top"></i>
      </el-backtop>
    </Card>
  </div>
</template>
<script>
import Upload from '@/components/common/upload'; // 上传组件
import qwInput from '@/components/common/formItem/qwInput'; // input组件
import util from '@/libs/util';
import baseInfo from './SPUViewComps/baseInfo.vue';
import saleInfo from './SPUViewComps/saleInfo.vue';
import picInfo from './SPUViewComps/picInfo.vue';
export default {
  components: {
    Upload,
    qwInput,
    baseInfo,
    saleInfo,
    picInfo
  },
  data () {
    return {
      productUuid: '', // 基本信息生成的uuid
      tabValue: 'baseInfo',
      spuNo: ''
    };
  },
  created () {
    const { productUuid } = this.$route.query;
    util.Pub.setStorageSync('productUuidDetail', productUuid);
  },
  mounted () {
    this.handleTabChange('baseInfo')
    // 刷新页面清除选择的供应商缓存
    window.localStorage.removeItem('selectSupplyList');
  },
  methods: {
    handleTabChange (type) {
      this.tabValue = type;
      this.$refs[type].getPageData();
    }
  }
};
</script>
